<template>
    <div class="boxs">
        <h3>login</h3>

        <el-form :model="data" :rules="rules" class="forms" ref="fs">
            <el-form-item prop="name">
                <el-input v-model="data.name" placeholder="用户名">
                    <template #prefix>
                        <el-icon :size="30" color="black"><User /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="pass">
                <el-input v-model="data.pass" placeholder="密码" type="password"  show-password>
                    <template #prefix>
                        <el-icon :size="30" color="black"><Key /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>

        <el-footer class="btnsBox">
            <el-button type="primary" class="btns" @click="getData">login</el-button>
        </el-footer>
        <img src="/5.png" alt="" class="imgs">
        <img src="/6.png" alt="" class="imgs2">
    </div>
</template>

<script>
    import {login} from '../api/user'
    export default {
        data() {
            return {
                data: {
                    name: '',
                    pass: ''
                },
                rules: {
                    name: [{
                            required: true,
                            message: '请输入用户名',
                            trigger: 'blur'
                        },
                        {
                            validator(r, v, c) {
                                if (v.length < 2 || v.length > 10) {
                                    c(new Error('长度应该在2~10中间'))
                                }else{
                                    c()
                                }
                            }
                        }
                    ],
                    pass: [
                        {
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        }, 
                    ]
                }
            }
        },
        methods:{
            getData(){
                this.$refs.fs.validate((v)=>{
                    if(v){
                        let {name,pass} = this.data;
                        login(name,pass).then(res=>{
                                localStorage.setItem('token',res.data.token);
                                this.$router.push({name:'admin'})
                        })
                    }
                });

                // this.
            }
        }
    }
</script>

<style scoped>
    .boxs{
        background-color: rgba(255, 255, 255, 0.5);
        overflow: hidden;
        position: relative;
    }

    .imgs{
        width: 100px;
        height: 100px;
        position: absolute;
        bottom: 0;
        left: 0px;
    }
    .imgs2{
        width: 100px;
        height: 100px;
        position: absolute;
        bottom: 0;
        right: 0px;
    }
    .forms{
        display: flex;
        height: 200px;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .forms .el-input{
        width: 350px;
        height: 50px;
    }
    h3 {
        height: 35px;
        line-height: 30px;
        text-align: center;
        font-weight: 600;
        font-size: 25px;
        box-sizing: border-box;
        margin-top: 90px;
        letter-spacing: 10px;
        background-image:linear-gradient(270deg, rgb(81, 195, 255), rgb(40, 144, 255));
        background-clip: text;
        -webkit-background-clip: text;
        color:transparent;
        font-size: 30px;
    }
    .btnsBox{
        text-align: center;
    }
    .btns{
        width: 350px;
    }
</style>